<template>
	<a-modal
		v-model:visible="visible"
		:title="handleTitle"
		:width="550"
		:mask-closable="false"
		:destroy-on-close="true"
		:loading="submitLoading"
		@ok="onSubmit"
		@cancel="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="节点：" name="toTaskId" v-if="operatorType == 3">
				<a-select v-model:value="formData.toTaskId" placeholder="请选择流程表单">
					<a-select-option v-for="(item, index) in taskIdOptions" :key="index" :value="item.id" :label="item.name"
						>{{ item.name }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="" name="toUser" v-if="operatorType == 4 || operatorType == 5">
				<a-button type="primary" @click="openUserSelector">选择人员</a-button>
				<br />
				<a-tag class="mt-3" v-for="(user, index) in userList" color="cyan" :key="index" @close="removeUserTag(index)">{{
					user.name
				}}</a-tag>
			</a-form-item>
			<a-form-item label="意见：" name="opinion">
				<a-textarea
					v-model:value="formData.opinion"
					placeholder="请输入意见"
					:auto-size="{ minRows: 3, maxRows: 5 }"
					allow-clear
				/>
			</a-form-item>
			<a-form-item label="附件：" name="attachFile">
				<xnUpload :uploadNumber="6" @uploadDone="fileResult" />
			</a-form-item>
		</a-form>
	</a-modal>
	<user-selector-plus
		ref="userSelectorPlusRef"
		:org-tree-api="selectorApiFunction.orgTreeApi"
		:user-page-api="selectorApiFunction.userPageApi"
		:checked-user-list-api="selectorApiFunction.checkedUserListApi"
		:radioModel="true"
		@onBack="userBack"
	/>
</template>
<script setup name="handleTaskModal">
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import xnUpload from '@/components/XnUpload/index.vue'
	import flowJobApi from '@/api/flow/flowJobApi'
	import userApi from '@/api/sys/userApi'
	import userCenterApi from '@/api/sys/userCenterApi'
	import UserSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
	const emit = defineEmits({ handleSuc: null, cancelHandle: null })
	const formRef = ref()
	const visible = ref(false)
	const formData = ref({})
	const handleTitle = ref('同意意见')
	const operatorType = ref(1)
	const recordData = ref()
	const submitLoading = ref(false)
	const taskIdOptions = ref([])
	const userSelectorPlusRef = ref()
	let userList = ref([])

	// 打开弹框
	const onOpen = (record, otype, title) => {
		if (record) {
			recordData.value = record
		}
		visible.value = true
		handleTitle.value = title
		operatorType.value = otype
		if (otype == 3 || otype == 4) {
			flowJobApi.rollbackNodes({ instanceId: record.instanceId }).then((res) => {
				taskIdOptions.value = res
			})
		}
	}

	const fileResult = (files) => {
		formData.value.attachFile = files
	}

	const onClose = () => {
		formRef.value.resetFields()
		visible.value = false
		emit('cancelHandle')
	}

	// 打开人员选择器
	const openUserSelector = () => {
		let ids = []
		// 打开之前选判断我们刚刚是否选过
		if (userList.value.length > 0) {
			userList.value.forEach((item) => {
				ids.push(item.id)
			})
		}
		userSelectorPlusRef.value.showUserPlusModal(ids)
	}
	// 人员选择回调
	const userBack = (value) => {
		userList.value = value
	}
	// 删除某用户
	const removeUserTag = (index) => {
		userList.value.splice(index, 1)
	}

	// 传递设计器需要的API
	const selectorApiFunction = {
		orgTreeApi: (param) => {
			return userApi.userOrgTreeSelector(param).then((data) => {
				return Promise.resolve(data)
			})
		},
		userPageApi: (param) => {
			return userApi.userSelector(param).then((data) => {
				return Promise.resolve(data)
			})
		},
		checkedUserListApi: (param) => {
			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
				return Promise.resolve(data)
			})
		}
	}

	// 默认要校验的
	const formRules = {
		opinion: [required('请输入审批意见')],
		toTaskId: [required('请选择节点')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		submitLoading.value = true
		formRef.value.validate().then(() => {
			const defParam = {
				instanceId: recordData.value.instanceId,
				taskId: recordData.value.id,
				formData: recordData.value.dataJson,
				approvalType: operatorType.value,
				delegate: recordData.value.delegate
			}
			if (operatorType.value == 4 || operatorType.value == 5) {
				defParam.toUser = userList.value[0].id
			}
			const param = Object.assign(defParam, formData.value)
			flowJobApi.flowApproval(param, formData.value.id).then((res) => {
				submitLoading.value = false
				onClose()
				emit('handleSuc')
			})
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
